﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>bom查询</title>
    <link href="~/Scripts/jquery-easyui/themes/bootstrap/easyui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-easyui/jquery.min.js"></script>
    <script src="~/Scripts/jquery-easyui/jquery.easyui.min.js"></script>
    @*<script src="~/Scripts/echarts.js"></script>*@
    <script src="~/Scripts/echarts.min.ben.js"></script>
    <link href="~/Content/themes/table.css" rel="stylesheet" />
    @*<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>*@
   
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    myChart.showLoading();
    $.get('getbomdata', function (data) {
        myChart.hideLoading();

        echarts.util.each(data.children, function (datum, index) {
            index % 2 === 0 && (datum.collapsed = true);
        });

        myChart.setOption(option = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series: [
                {
                    type: 'tree',

                    data: [data],

                    top: '1%',
                    left: '7%',
                    bottom: '1%',
                    right: '20%',

                    symbolSize: 12,

                    label: {
                        normal: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 9
                        }
                    },

                    leaves: {
                        label: {
                            normal: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        }
                    },

                    expandAndCollapse: true,
                    animationDuration: 550,
                    animationDurationUpdate: 750
                }
            ]
        });
    });

</script>

